<template>
  <div>
    <h1>商店中心</h1>
    <el-form :inline="true">
      <el-form-item label="">
        <el-input v-model="searchForm.name" placeholder="请输入商店名称">
        </el-input>
      </el-form-item>
      <el-button class="search" type="success" @click="getList()"
        >查询</el-button
      >
    </el-form>

    <el-table
      ref="multipleTable"
      tooltip-effect="drak"
      style="width: 100%"
      :data="list"
    >
      <el-table-column label="商店名称" prop="name" width="160">
      </el-table-column>
      <el-table-column
        label="商店描述"
        prop="description"
        width="400"
      ></el-table-column>
      <el-table-column label="创建者" prop="creater"></el-table-column>
      <el-table-column label="创建时间" prop="createTime"></el-table-column>
      <!-- <el-table-column label="修改者" prop="updater"></el-table-column>
    <el-table-column label="修改时间" prop="updateTime"></el-table-column> -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="search(scope.row.name)"
            >查询商店商品</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[10, 20, 50, 100]"
      :current-page="current"
      :page-size="size"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import Info from "@/views/goods/Info";
export default {
  name: "Shop",
  data() {
    return {
      total: 0,
      size: 10,
      current: 1,
      list: [],
      addForm: false,
      shop: {},
      searchForm: {
        name: "",
      },
      formRules: {
        name: [
          {
            required: true,
            message: "输入商店名称",
            trigger: ["blur"],
          },
        ],
        description: [
          {
            required: true,
            message: "请输入商店信息描述",
            trigger: ["blur"],
          },
        ],
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleClose() {
      this.resetForm();
    },
    resetForm() {
      this.addForm = false;
      this.shop = {};
    },
    getList() {
      this.$axios
        .get("/sys/shop/list", {
          params: {
            name: this.searchForm.name,
            current: this.current,
            size: this.size,
          },
        })
        .then((res) => {
          this.list = res.data.data.records;
          this.size = res.data.data.size;
          this.current = res.data.data.current;
          this.total = res.data.data.total;
        });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios
            .post("/sys/shop/" + (this.shop.id ? "update" : "save"), this.shop)
            .then((res) => {
              this.getList();
              this.resetForm();
              this.$message({
                showClose: true,
                message: res.data.data,
                type: "success",
                onClose: () => {},
              });
            });
          this.addForm = false;
        }
      });
    },
    handleSizeChange(val) {
      this.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.current = val;
      this.getList();
    },
    search(name) {
      this.$router.push({name:'Info',query:{name:name}});
    },
  },
  components: {
    Info,
  },
};
</script>

<style scoped>
.el-table {
  font-size: 18px;
}

div /deep/.el-dialog__title {
  font-size: 22px;
}

div /deep/.el-form-item__label,
.el-input {
  font-size: 18px;
}
</style>